<template>
  <el-dialog
    top="30px"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-button class="float-right m-1" @click="getData()" icon="el-icon-refresh" :loading="loading">
      刷新
    </el-button>
    <table
      class="table table-bordered table-sm text-center table-vertical-middle"
      v-loading="loading"
    >
      <thead class="thead-bottom-1">
        <tr class="text-center">
          <th>sign_no</th>
          <th>发起时间</th>
          <th>签约主体</th>
          <th>签约手机号</th>
          <th>签章类型</th>
          <th>签约状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.extra2 }}</td>
          <td class="text-left" width="90px">{{ item.create_time }}</td>
          <td>{{ item.sign_entity }}</td>
          <td class="input-td">
            <el-input v-model="item.sign_entity_phone"></el-input>
          </td>
          <td>{{ item.taskType }}</td>
          <td>{{ item.taskStatus }}</td>
          <td>
            <el-button type="text" @click="toSignView(item)"><i class="fa fa-edit"></i></el-button>
            <el-button type="text" @click="showDoc(item)"><i class="fa fa-search"></i></el-button>
            <el-button type="text" @click="changeStatus(item)">
              <i class="fa fa-check"></i>
            </el-button>
            <el-button type="text" @click="handlerDelete(item)">
              <i class="fa fa-trash text-danger"></i>
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <el-dialog
      top="30px"
      width="1100px"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="viewVisible"
    >
      <pdf-view :query-id="relatedId" :contract-id="docId"></pdf-view>
    </el-dialog>
  </el-dialog>
</template>

<script>
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
const enumSignType = {
  38: '委托合同',
  39: '反担保合同',
  41: '担保费缴纳通知书',
  43: '担保申请书',
  44: '承诺书',
}
const enumTaskStatus = {
  0: '未签约',
  1: '已签约',
  2: '签约被拒',
}
export default {
  components: { PdfView },
  props: {
    visible: Boolean,
    relatedId: String,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        'task_type.in': '38,39,41,43,44',
      },
      tableData: [],
      loading: false,
      totalCount: 0,
      tableName: 'customer_task_view',
      viewVisible: false,
      docId: '',
    }
  },
  computed: {},
  watch: {
    relatedId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlerDelete(item) {
      this.$utils
        .msgbox({
          message: `确定删除?`,
          type: 'warning',
          beforeClose: () => this.$api.deleteData('credit', 'task_list', item.task_id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    changeStatus(item) {
      this.$utils
        .msgbox({
          message: `确定更新签约状态?`,
          type: 'warning',
          beforeClose: () =>
            this.$api.deleteData('credit', 'task_list', item.task_id, { task_status: 1 }),
        })
        .then(() => {
          this.$message.success('修改成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`修改失败，请重试！`))
    },
    showDoc(item) {
      this.docId = item.extra1
      this.viewVisible = true
    },
    async toSignView(taskInfo) {
      const isCompany = +(taskInfo.sign_entity_type ?? '') === 1
      const tenantType = isCompany ? 'COMPANY' : 'PERSONAL'
      const receiverName = isCompany ? taskInfo.sign_entity : void 0
      const body = {
        contractId: taskInfo.extra2,
        contact: taskInfo.sign_entity_phone,
        tenantName: taskInfo.sign_entity,
        tenantType,
        callbackPage: location.href,
        receiverName,
      }

      const res = await this.$http.post('/api/credit/proxy/', {
        proxy_key: 'signurl-query',
        params: JSON.stringify(body),
        extra: taskInfo.customer_related_id,
      })
      if (res.data?.code === 0) {
        window.open(res.data.signUrl)
      } else {
        this.$message.error(`${res?.data?.message ?? '获取签章页面失败'} `)
      }
    },
    dataAdapter(row) {
      row.taskType = enumSignType[row.task_type]
      row.taskStatus = enumTaskStatus[row.task_status]
      return row
    },
    getData() {
      if (!this.relatedId) {
        return
      }
      this.params['customer_related_id.eq'] = this.relatedId
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, {
          N1task_status: 'asc',
          N2extra2: 'asc',
          N3create_time: 'desc',
          N4extra1: 'asc',
        })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data.data ?? []).map(this.dataAdapter)
          this.totalCount = data.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
